<script setup lang="ts">
import { reactive } from 'vue'
import PaginationBar from '@/components/common/PaginationBar.vue'
interface FAQItem {
  question: string
  standardQuestion: string
  standardAnswer: string
  count: number
  lastUpdateTime: string // 可以是 Date 类型，这里用 string 更通用
}

const list = reactive<FAQItem[]>([
  {
    question: '你好，广州这边的航天管理费是要汇哪个账号？',
    standardQuestion: '修改企业银行账号',
    standardAnswer:
      '用管理员身份进入系统后，点击系统设置-参数设置，可以修改地址、电话、银行账号......',
    count: 1,
    lastUpdateTime: '2019-01-01 11:30',
  },
  {
    question: '你好，广州这边的航天管理费是要汇哪个账号？',
    standardQuestion: '修改企业银行账号',
    standardAnswer:
      '用管理员身份进入系统后，点击系统设置-参数设置，可以修改地址、电话、银行账号......',
    count: 1,
    lastUpdateTime: '2019-01-01 11:30',
  },
  {
    question: '你好，广州这边的航天管理费是要汇哪个账号？',
    standardQuestion: '修改企业银行账号',
    standardAnswer:
      '用管理员身份进入系统后，点击系统设置-参数设置，可以修改地址、电话、银行账号......',
    count: 1,
    lastUpdateTime: '2019-01-01 11:30',
  },
])
</script>

<template>
  <div class="container">
    <el-scrollbar height="500px">
      <el-card style="border: none" shadow="never">
        <div>
          <el-divider style="margin-top: 0" />
        </div>
        <template v-for="item in list" :key="item.id">
          <div>
            <div class="card-item">
              <div class="left">
                <p class="question">{{ item.question }}</p>
                <p class="standard-question">标准问题：{{ item.standardQuestion }}</p>
                <p class="standard-answer">标准回答：{{ item.standardAnswer }}</p>
                <p class="bottom">
                  <span class="count">出现次数：{{ item.count }}</span>
                  <span class="update-time">最新消息时间：{{ item.lastUpdateTime }}</span>
                </p>
              </div>

              <div class="right">
                <el-button type="primary" link>新增</el-button>
                <el-button type="primary" link>合并</el-button>
                <el-button type="primary" link>编辑</el-button>
                <el-button type="danger" link>删除</el-button>
              </div>
            </div>

            <el-divider />
          </div>
        </template>
      </el-card>

      <!-- 分页 -->
      <pagination-bar />
      <div style="height: 60px"></div>
    </el-scrollbar>
  </div>
</template>

<style scoped>
.card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-item p {
  font-size: 0.9rem;
}

.card-item .question {
  font-weight: 900;
  margin-bottom: 5px;
}

.card-item .standard-question,
.card-item .standard-answer {
  color: rgba(0, 0, 0, 0.447);
  margin-bottom: 10px;
}

.card-item .bottom {
  color: rgba(0, 0, 0, 0.447);
  font-size: 0.8rem;
}

.card-item .bottom span {
  display: inline-block;
}

.card-item .bottom .count {
  width: 150px;
}

.card-item .bottom .update-time {
  width: 200px;
}

.left {
  flex: 1;
}

/* 右侧按钮 */
.right {
  display: flex;
}
</style>
